<template>
  <div>
    <el-drawer
      custom-class="learn-drawer"
      title="查看试卷"
      :visible.sync="dataForm.drawer"
      direction="btt"
      size="100%"
      :modal="false"
    >
      <div class="body">
<!--        <div class="left">-->
<!--          <div class="answer-left">-->
<!--            <div>-->
<!--              <div v-if="multipleList.length > 0" class="radioQuestion" @click="goAnchor('example')">-->
<!--                <el-card >-->
<!--                  <div class="title" >单选题</div>-->
<!--                  <div class="totalQuestion">共{{radiolength}}题</div>-->
<!--                  <div>合计{{zscore}}分</div>-->
<!--                </el-card>-->
<!--              </div>-->
<!--              <div  v-if="multipleChoiceList.length > 0" @click="goMultiple('multip')">-->
<!--                <el-card class="radioQuestion">-->
<!--                  <div class="title">多选题</div>-->
<!--                  <div class="totalQuestion">共{{multipleChoicelength}}题</div>-->
<!--                  <div>合计{{multipscore}}分</div>-->
<!--                </el-card>-->
<!--              </div>-->
<!--              <div v-if="judgeList.length > 0" class="radioQuestion" @click="gojudge('judge')">-->
<!--                <el-card  >-->
<!--                  <div class="title">判断题</div>-->
<!--                  <div class="totalQuestion">共{{judgelength}}题</div>-->
<!--                  <div>合计{{judgescore}}分</div>-->
<!--                </el-card>-->
<!--              </div>-->
<!--              <div v-if="blankList.length > 0" class="radioQuestion" @click="getblank('blank')">-->
<!--                <el-card  >-->
<!--                  <div class="title">填空题</div>-->
<!--                  <div class="totalQuestion">共{{blanklength}}题</div>-->
<!--                  <div>合计{{blankscore}}分</div>-->
<!--                </el-card>-->
<!--              </div>-->
<!--              <div v-if="shortanswerList.length > 0" class="radioQuestion" @click="getshort('short')">-->
<!--                <el-card  >-->
<!--                  <div class="title">问答题</div>-->
<!--                  <div class="totalQuestion">共{{shortanswerlength}}题</div>-->
<!--                  <div>合计{{shortscore}}分</div>-->
<!--                </el-card>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="content" style="width: 1120px">
          <div v-if="multipleList.length > 0" ref="example">
            <div style="height: 60px;background: #DEDEDE">
              <span class="questionType">单选题, 共{{radiolength}}题(合计{{zscore}}分)</span>
            </div>
            <div v-for="(item, index) in multipleList" :key="index">
              <div class="info">
                <div>{{ index+1 }}.{{ item.result }}</div>
                <div>
                  <span>{{item.score}}分</span>
                </div>
              </div>
              <div v-for="(opt, index) in item.questionOptionList" :key="index">
                <div style="display: flex;padding: 20px">
                  <div class="opt"  :class="opt.checked === true ? 'isCheck' : ''">{{opt.key}}</div>
                  <div class="answer">{{ opt.option }}</div>
                </div>
              </div>
              <div class="answerAnalysis">
                <span>您的答案：<span style="color: #1A8CFE">{{item.selfAnsw}}</span></span><br />
                <span>正确答案：{{item.rightAnsw}}</span><br />
                <span>答案解析：{{item.analysis}}</span>
              </div>
            </div>
          </div>
          <div v-if="multipleChoiceList.length > 0">
            <div style="height: 60px;background: #DEDEDE" ref="multip">
              <span class="questionType">多选题,共{{multipleChoicelength}}题(合计{{multipscore}}分)</span>
            </div>
            <div v-for="(item, index) in multipleChoiceList" :key="index">
              <div class="info">
                <div style="width: 80%">{{ index+1 }}.{{ item.result }}</div>
                <div>
                  <span>{{item.score}}分</span>
                </div>
              </div>
              <div v-for="(opt, index) in item.questionOptionList" :key="index">
                <div style="display: flex;padding: 20px">
                  <div class="opt"  :class="opt.checked === true ? 'isCheck' : ''">{{opt.key}}</div>
                  <div class="answer">{{ opt.option }}</div>
                </div>
              </div>
              <div class="answerAnalysis">
                <span>您的答案：<span style="color: #1A8CFE">{{item.selfAnsw}}</span></span><br />
                <span>正确答案：{{item.rightAnsw}}</span><br />
                <span>答案解析：{{item.analysis}}</span>
              </div>
            </div>
          </div>
          <div v-if="judgeList.length > 0">
            <div style="height: 60px;background: #DEDEDE" ref="judge">
              <span class="questionType">判断题,共{{judgelength}}题(合计{{judgescore}}分)</span>
            </div>
            <div v-for="(item, index) in judgeList" :key="index">
              <div class="info">
                <div style="width: 80%">{{ index+1 }}.{{ item.result }}</div>
                <div>
                  <span>{{item.score}}分</span>
                </div>
              </div>
              <div v-for="(opt, index) in item.questionOptionList" :key="index">
                <div style="display: flex;padding: 20px">
                  <div class="opt"  :class="opt.checked === true ? 'isCheck' : ''">{{opt.key}}</div>
                  <div class="answer">{{ opt.option }}</div>
                </div>
              </div>
              <div class="answerAnalysis">
                <span>您的答案：<span style="color: #1A8CFE">{{item.selfAnsw}}</span></span><br />
                <span>正确答案：{{item.rightAnsw}}</span><br />
                <span>答案解析：{{item.analysis}}</span>
              </div>
            </div>
          </div>

          <div v-if="blankList.length > 0">
            <div style="height: 60px;background: #DEDEDE" ref="blank">
              <span class="questionType">填空题,共{{blanklength}}题(合计{{blankscore}}分)</span>
            </div>
            <div v-for="(item, index) in blankList" :key="index">
              <div class="info">
                <div style="width: 80%">{{ index+1 }}.{{ item.result }}</div>
                <div>
                  <span>{{item.score}}分</span>
                </div>
              </div>
              <div v-for="(opt, index) in item.selfAnsw" :key="index">
                <el-input class="input-on" v-model="item.selfAnsw[index]" :disabled="true"></el-input>
              </div>
              <div class="answerAnalysis">
                <span>您的答案：<span style="color: #1A8CFE">{{item.selfAnsw}}</span></span><br />
                <span>正确答案：{{item.rightAnsw}}</span><br />
                <span>答案解析：{{item.analysis}}</span>
              </div>
            </div>
          </div>

          <div v-if="shortanswerList.length > 0">
            <div style="height: 60px;background: #DEDEDE" ref="short">
              <span class="questionType">简答题,共{{shortanswerlength}}题(合计{{shortscore}}分)</span>
            </div>
            <div v-for="(item, index) in shortanswerList" :key="index">
              <div class="info">
                <div style="width: 80%">{{ index+1 }}.{{ item.result }}</div>
                <div>
                  <span>{{item.score}}分</span>
                </div>
              </div>
              <div style="margin-bottom: 20px">
                <el-input style="padding: 0 20px" type="textarea"   :rows="4" placeholder="请输入内容" v-model="item.selfAnsw"></el-input>
              </div>
              <div class="answerAnalysis">
                <span>正确答案：{{item.rightAnsw}}</span><br />
                <span>答案解析：{{item.analysis}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="answer-right">
            <div style="margin-top: 20px;display: flex;flex-flow: row wrap;">
              <div v-print="printObj">
<!--                <el-button type="primary">打印</el-button>-->
              </div>
<!--              <el-button  type="primary" @click="coles()">关闭</el-button>-->
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  export default {
    name: 'testPaper',
    data() {
      return {
        printObj: {
          id: 'printer',
          popTitle: '',
          extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
        },
        quesList: [],
        multipleList: [],
        multipleChoiceList: [],
        judgeList: [],
        status: 0,
        blankList: [],
        radiolength: '',
        multipleChoicelength: '',
        judgelength: '',
        zscore: '',
        shortanswerlength: '',
        blanklength: '',
        shortanswerList: [],
        answerInfo: [],
        score: 0,
        dataForm: {
          drawer: false,
          paperId: '',
          realname: '',
          isPass: '',
          score:''
        }
      }
    },
    methods: {
      init(paperId) {
        this.dataForm.drawer = true
        this.answerInfo = []
        this.dataForm.paperId = paperId
        this.getQuesList()
      },
      coles() {
        this.dataForm.drawer = false
      },
      // onChildValue(index, type) {
      //   console.log(index)
      // },
      // goAnchor,
      // 單選錨點跳轉
      goAnchor() {
        this.$refs["example"].scrollIntoView(true);
      },
      // 多選錨點跳轉
      goMultiple() {
        this.$refs["multip"].scrollIntoView(true);
      },
      // 判断锚点
      gojudge() {
        this.$refs["judge"].scrollIntoView(true);
      },
      // 填空锚点
      getblank() {
        this.$refs["blank"].scrollIntoView(true);
      },
      // 问答锚点
      getshort() {
        this.$refs["shore"].scrollIntoView(true);
      },
      // panduan
      judgeSuess(index, type) {
        switch (type) {
          case 1:
            this.multipleList[index].resultType = 1
            this.answerInfo.forEach(x => {
              if (x.quesId === this.multipleList[index].quesId) {
                this.answerInfo.splice(index, 1)
              }
            })
            this.answerInfo.push(this.multipleList[index])
            // this.quesCateIds.push(this.multipleList[index])
            break;
          case 2:
            this.multipleChoiceList[index].resultType = 1
            this.answerInfo.forEach(x => {
              if (x.quesId === this.multipleChoiceList[index].quesId) {
                this.answerInfo.splice(index, 1)
              }
            })
            this.answerInfo.push(this.multipleChoiceList[index])
            break;
          case 3:
            this.judgeList[index].resultType = 1
            this.answerInfo.forEach(x => {
              if (x.quesId === this.judgeList[index].quesId) {
                this.answerInfo.splice(index, 1)
              }
            })
            this.answerInfo.push(this.judgeList[index])
            break;
          case 4:
            this.blankList[index].resultType = 1
            this.answerInfo.forEach(x => {
              if (x.quesId === this.blankList[index].quesId) {
                this.answerInfo.splice(index, 1)
              }
            })
            this.answerInfo.push(this.blankList[index])
            break;
          case 5:
            this.shortanswerList[index].resultType = 1
            this.answerInfo.forEach(x => {
              if (x.quesId === this.shortanswerList[index].quesId) {
                this.answerInfo.splice(index, 1)
              }
            })
            this.answerInfo.push(this.shortanswerList[index])
            break;
        }
      },
      judgeError(index, type) {
        switch (type) {
          case 1:
            this.multipleList[index].resultType = 2
            this.answerInfo.forEach(x => {
              if (x.quesId === this.multipleList[index].quesId) {
                this.answerInfo.splice(index, 1)
              }
            })
            this.answerInfo.push(this.multipleList[index])
            console.log(this.answerInfo, '++++')
            break;
          case 2:
            this.multipleChoiceList[index].resultType = 2
            this.answerInfo.forEach(x => {
              if (x.quesId === this.multipleChoiceList[index].quesId) {
                this.answerInfo.splice(index, 1)
              }
            })
            this.answerInfo.push(this.multipleChoiceList[index])
            break;
          case 3:
            this.judgeList[index].resultType = 2
            this.answerInfo.forEach(x => {
              if (x.quesId === this.judgeList[index].quesId) {
                this.answerInfo.splice(index, 1)
              }
            })
            this.answerInfo.push(this.judgeList[index])
            break
          case 4:
            this.blankList[index].resultType = 2
            this.answerInfo.forEach(x => {
              if (x.quesId === this.blankList[index].quesId) {
                this.answerInfo.splice(index, 1)
              }
            })
            this.answerInfo.push(this.blankList[index])
            break
          case 5:
            this.shortanswerList[index].resultType = 2
            this.answerInfo.forEach(x => {
              if (x.quesId === this.shortanswerList[index].quesId) {
                this.answerInfo.splice(index, 1)
              }
            })
            this.answerInfo.push(this.shortanswerList[index])
            break
        }

      },
      getQuesList() {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/exam-admin/paper/preview'),
          method: 'post',
          data: {
            paperId : this.dataForm.paperId
          }
        }).then(data => {
          if (data && data.code === 200) {
            this.dataForm.realname = data.data.realname
            this.dataForm.isPass = data.data.isPass
            this.dataForm.score = data.data.score
            // 单选
            this.multipleList = data.data.filter(item => item.quesType ===1 ).map(item => ({
              quesType: item.quesType,
              selfAnsw: item.selfAnsw,
              rightAnsw: item.rightAnsw,
              info: item.info,
              analysis: item.analysis,
              quesId: item.id,
              resultType: item.resultType,
              questionOptionList: item.questionOptionList,
              score: item.score
            })).sort()
            this.radiolength = this.multipleList.length
            this.multipleList.forEach(x =>{
              this.zscore = x.score * this.radiolength
            })
            this.multipleList.forEach(quer => {
              var result = quer.info.replace(/<.*?>/ig, '')
              this.$set(quer, 'result', result)
            })
            // 多选
            this.multipleChoiceList = data.data.filter(item => item.quesType === 2 ).map(item => ({
              quesType: item.quesType,
              selfAnsw: item.selfAnsw,
              rightAnsw: item.rightAnsw,
              info: item.info,
              analysis: item.analysis,
              quesId: item.id,
              resultType: item.resultType,
              questionOptionList: item.questionOptionList,
              score: item.score
            })).sort()
            this.multipleChoicelength = this.multipleChoiceList.length
            this.multipleChoiceList.forEach(x =>{
              this.multipscore = x.score * this.multipleChoicelength
            })
            this.multipleChoiceList.forEach(quer => {
              var result = quer.info.replace(/<.*?>/ig, '')
              this.$set(quer, 'result', result)
            })
            // 判断
            this.judgeList = data.data.filter(item => item.quesType === 3 ).map(item => ({
              quesType: item.quesType,
              selfAnsw: item.selfAnsw,
              rightAnsw: item.rightAnsw,
              info: item.info,
              analysis: item.analysis,
              quesId: item.id,
              questionOptionList: item.questionOptionList,
              resultType: item.resultType,
              score: item.score
            })).sort()
            this.judgelength = this.judgeList.length
            this.judgeList.forEach(x =>{
              this.judgescore = x.score * this.judgelength
            })
            this.judgeList.forEach(quer => {
              var result = quer.info.replace(/<.*?>/ig, '')
              this.$set(quer, 'result', result)
            })
            // 填空
            this.blankList = data.data.filter(item => item.quesType === 4 ).map(item => ({
              quesType: item.quesType,
              selfAnsw: item.selfAnsw ? JSON.parse(item.selfAnsw) : '',
              rightAnsw: item.rightAnsw,
              info: item.info,
              quesId: item.id,
              resultType: item.resultType,
              analysis: item.analysis,
              score: item.score
            })).sort()
            this.blanklength = this.blankList.length
            this.blankList.forEach(x =>{
              this.blankscore = x.score * this.blanklength
            })
            this.blankList.forEach(quer => {
              var result = quer.info.replace(/<.*?>/ig, '')
              this.$set(quer, 'result', result)
            })
            // 简答
            this.shortanswerList = data.data.filter(item => item.quesType === 5 ).map(item => ({
              quesType: item.quesType,
              selfAnsw: item.selfAnsw,
              rightAnsw: item.rightAnsw,
              info: item.info,
              questionOptionList: item.questionOptionList,
              blackCount: item.blackCount,
              analysis: item.analysis,
              resultType: item.resultType,
              quesId: item.id,
              score: item.score
            })).sort()
            this.shortanswerlength = this.shortanswerList.length
            this.shortanswerList.forEach(x =>{
              this.shortscore = x.score * this.shortanswerlength
            })
            this.shortanswerList.forEach(quer => {
              var result = quer.info.replace(/<.*?>/ig, '')
              this.$set(quer, 'result', result)
            })
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      async onsubmit() {
        var answer = this.answerInfo.map(item => ({
          resultType: item.resultType,
          quesId: item.quesId
        }))
        var res = await this.$http.post('/exam-admin/score/mark', {
          answerInfo: JSON.stringify(answer),
          examId: this.dataForm.examId,
          userId: this.dataForm.userId
        })
        if (res.code === 200) {
          this.dataForm.drawer = false
          this.$emit('refreshDataList')
        }
        // this.dataList = res.data.list
        // this.totalPage = res.data.totalCount
        // this.dataListLoading = false
      }

    }
  }
</script>

<style scoped>
  .body{
    width: 100%;
    display: flex;
    cursor:pointer;
  }
  .left{
    margin-top: 30px;
    width: 20%;
  }
  .title{
    font-size: 18px;
    font-weight: 700;
  }
  .up{
    height: 100%;
    width: 100%;
    background-color: #f2f5f6;
    box-shadow: 0 0 6px rgba(0,0,0, .12);
    text-align: center;
    line-height: 40px;
    color: #1989fa;
  }
  .right{
    margin-left: 20px;
    width: 10%;
  }
  .questionType{
    font-size: 20px;
    line-height: 60px;
  }
  .answer-left{
    position: fixed;
  }
  .answer-right{
    position: fixed;
  }
  .answer{
    margin-left: 10px;
  }
  .info{
    display: flex;
    justify-content: space-between;
    padding: 20px;
  }
  .img{
    width: 36px;
    height: 36px;
  }
  .answerAnalysis{
    padding-left: 20px;
    margin-bottom: 30px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction:column;
    background: rgba(222, 222, 222, 0.2);
  }
  .content{
    border: 1px solid #CCCCCC;
    margin: auto;
  }
  .opt{
    width: 20px;
    height: 20px;
    /*border: 1px solid #333333;*/
    border-radius: 50%;
    padding-left: 4px;
  }
  .totalQuestion{
    margin-top: 20px;
  }
  .radioQuestion{
    width: 80%;
    height: 120px;
    margin: 10px 40px;
  }
  .isCheck {
    background: rgba(52,194,253,1);
    color: #ffffff;
  }
  .input-on{
    margin: 10px 20px;
    padding: 0 20px;
    width: 300px;
  }
</style>
